﻿<style>
    .content, 
    .property-title small{
        font-size: 17px;
    }

    textarea, input, button {
        font-size: 17px!important;
    }

    .blur-loading {
        filter: blur(10px);
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
    }
</style>

<!-- BEGIN PAGE TITLE/BREADCRUMB -->
<div class="parallax colored-bg pattern-bg" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">Property Detail</h1>
                <span us-spinner="{radius:15, width:4, length: 20}"></span>

                <!--<ul class="breadcrumb">
                    <li><a href="index.html">Home </a></li>
                    <li><a href="#">Properties</a></li>
                    <li><a href="properties-detail.html">Property Detail</a></li>
                </ul>-->
            </div>
        </div>
    </div>
</div>
<!-- END PAGE TITLE/BREADCRUMB -->

<!-- BEGIN CONTENT WRAPPER -->
<div class="content">
    <div class="container">
        <div class="row">
            <!-- BEGIN MAIN CONTENT -->

            <div class="main col-sm-8" ng-class="{'blur-loading': isSearch == true}">

                <h1 class="property-title">{{ property.LongHeading }}<small>{{ property.road }}, {{ property.location}}</small></h1>

                <div class="property-topinfo"> 
                    <ul class="amenities">
                        <!--<li><i class="icon-apartment"></i> Apartment</li>-->
                        <li>Land Area <i class="icon-area"></i> {{ property.LandSqrtFt }} Sq Ft </li>
                        <li>Built Area <i class="icon-area"></i> {{ property.BuildUp }} Sq Ft </li>

                        <!--<li><i class="icon-bedrooms"></i> {{ property.Room }}</li>
                        <li><i class="icon-bathrooms"></i> {{ property.Bathroom}}</li>-->
                    </ul>

                    <!--<div id="property-id">ID: #025635637</div>-->
                </div>

                <!-- BEGIN PROPERTY DETAIL SLIDERS WRAPPER -->
                <div id="property-detail-wrapper" class="style1">

                    <div class="price">
                        <span ng-if="isPropertyTransactSale(property.listType[0])"><i class="fa fa-home"></i>For Sale</span>
                        <span ng-if="isPropertyTransactSale(property.listType[0])">{{ property.SalePrice | currency:"RM ":2 }}</span>

                        <span ng-if="!isPropertyTransactSale(property.listType[0])"><i class="fa fa-home"></i>For Rent</span>
                        <span ng-if="!isPropertyTransactSale(property.listType[0])"> {{ property.RentPrice | currency:"RM ":2 }}</span>

                    </div>

                    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
                        <div uib-slide ng-repeat="slide in slides track by $index" index="$index">
                            <img ng-src="{{slide.pictureURL}}" style="margin:auto;max-height: 235px;">
                            <div class="carousel-caption">
                                <h4>Slide {{$index}}</h4>
                                <p>{{property.LongHeading}}</p>
                            </div>
                        </div>
                    </div>

                </div>

                <p></p><br/>
                <div class="col-sm-12">
                    <label class="col-sm-4">Location</label>
                    <div class="col-sm-8">
                        <span style="font-size:17px">{{property.location}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Road</label>
                    <div class="col-sm-8">
                        <span> {{property.road}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Project</label>
                    <div class="col-sm-8">
                        <span> {{property.Project}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Property Type</label>
                    <div class="col-sm-8">
                        <span> {{property.type}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Updated Date</label>
                    <div class="col-sm-8">
                        <span>  {{property.UpdateDate | date:"dd/MM/yyyy"}}</span>
                    </div>
                </div>

             
                <div class="col-sm-12">
                    <label class="col-sm-4">Land Area</label>
                    <div class="col-sm-8">
                        <span>{{ property.LandSqrtFt }} Sq Ft</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Built Up Area</label>
                    <div class="col-sm-8">
                        <span>{{ property.BuildUp }} Sq Ft</span>
                    </div>
                </div>


                <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                    <label class="col-sm-4">Furnish</label>
                    <div class="col-sm-8">
                        <span> {{property.Furnished}}</span>
                    </div>
                </div>

                <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                    <label class="col-sm-4">Renovated</label>
                    <div class="col-sm-8">
                        <span>{{property.Renovated}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Tenure</label>
                    <div class="col-sm-8">
                        <span> {{property.Tenure}}</span>
                    </div>
                </div>

                <div class="col-sm-12" ng-show="property.listType=='RL' || property.listType=='SL'">
                    <label class="col-sm-4">Zoning</label>
                    <div class="col-sm-8">
                        <span>{{property.Zoning}}</span>
                    </div>
                </div>

                <div class="col-sm-12" ng-show="property.listType=='RI' || property.listType=='SI'">
                    <label class="col-sm-4">Ceiling</label>
                    <div class="col-sm-8">
                        <span>{{ property.Ceiling}}</span>
                    </div>
                </div>

                <div class="col-sm-12" ng-show="property.listType=='RI' || property.listType=='SI'">
                    <label class="col-sm-4">Floor Load</label>
                    <div class="col-sm-8">
                        <span> {{property.FloorLoad}}</span>
                    </div>
                </div>

                <div class="col-sm-12">
                    <label class="col-sm-4">Property Remark</label>
                    <div class="col-sm-8">
                        <span> {{property.PropertyDesc}}</span>
                    </div>
                </div>

                <!--<div class="col-sm-12" >
                    <label class="col-sm-4">Furnished Remark</label>
                    <div class="col-sm-8">
                        <span> {{property.FurnishedRemark}}</span>
                    </div>
                </div>

                <div class="col-sm-12" >
                    <label class="col-sm-4">Renovated Remark</label>
                    <div class="col-sm-8">
                        <span> {{property.RenovatedRemark}}</span>
                    </div>
                </div>-->




                <h1 class="section-title">Property Location</h1>
                <!-- PROPERTY MAP HOLDER -->
                <!--<div id="property_location" class="map col-sm-12">

                </div>-->
                <ng-map default-style="true" center="{{property.Latitude}},{{property.Longitude}}" zoom="15">
                    <info-window id="foo" on-mouseover="mouseover()">
                        <div ng-non-bindable="" style="font-weight: bold">
                            {{store.LongHeading}}<br />
                            {{store.displayPrice}} <br />
                            Agent : {{store.agentname}}   HP: {{store.mobile}}
                            <a href="/property/{{store.propertyid}}/{{property.listType}}">View Detail</a>
                        </div>
                    </info-window>
                    <marker ng-repeat="location in nearByList" id="id_{{location.propertyid}}"
                            position="{{location.Latitude}},{{location.Longitude}}" icon="images/PenangRealty_Icon.gif"
                            on-click="showProperty(event, location)"></marker>
                    <info-window id="bar" on-mouseover="mouseover()" visible-on-marker="currentProperty">
                        <div ng-non-bindable="" style="font-weight: bold">
                            Current Property <br />
                            {{property.Project}} <br />
                        </div>
                    </info-window>
                    <marker id="currentProperty" position="{{property.Latitude}},{{property.Longitude}}" on-click="map.showInfoWindow('bar')" icon="images/ListingIcon.gif" animation="BOUNCE" />
                </ng-map>


                <div class="share-wraper col-sm-12" style="font-size: 17px;">

                    <h5>Share this Property:</h5>
                    <ul class="social-networks">
                        <li><a target="_blank" href="http://www.facebook.com/sharer.php?caption={{ shareTitle }}&description={{ shareDescription }}&u={{ shareURL }}&picture={{ shareImageURL }}"><i class="fa fa-facebook"></i></a></li>
                        <li><a target="_blank" href="https://twitter.com/intent/tweet?url={{ shareURL }}&amp;text={{ shareTitle }}"><i class="fa fa-twitter"></i></a></li>
                        <li><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url={{ shareURL }}&title={{ shareTitle }}&summary={{ shareDescription }}"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="whatsapp://send?text={{ shareURL }} {{ shareTitle }}" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a></li>
                        <li>
                            <a target="_blank" href="https://plus.google.com/share?text={{ shareTitle }} {{ shareURL }}">
                                <i class="fa fa-google"></i>
                            </a>
                        </li>
                        <li ng-show="isAndroid == true">
                            <a href="mailto:?subject={{ property.LongHeading }}&body=Hi%2C%0A%0ACheck%20out%20this%20property%20from%20Shijieproperty%3A%20{{ current_path_url }}%0A%0AThank%20you.">
                                <i class="fa fa-envelope"></i>
                            </a>
                        </li>
                        <li ng-show="isAndroid == false">
                            <a href="mailto:?Subject={{ property.LongHeading }}&Body=Hi%2C%0A%0ACheck%20out%20this%20property%20from%20Shijieproperty%3A%20%3Ca%20href%3D%22{{ current_path_url }}%22%3EHere%3C/a%3E%0A%0AThank%20you."><i class="fa fa-envelope"></i></a>
                        </li>
                    </ul>

                    <a class="print-button" href="javascript:window.print();">
                        <i class="fa fa-print"></i>
                    </a>
                </div>


                <h1 class="section-title">REN Information</h1>
                <!-- BEING AGENT INFORMATION -->
                <div class="property-agent-info">
                    <div class="agent-detail col-md-4">
                        <div class="image">
                            <img alt="" src="{{ property.StaffPicURL }}" />
                        </div>

                        <div class="info">
                            <header>
                                <h2 style="font-size:20px!important;">{{ property.agentname }}</h2>
                            </header>

                            <ul class="contact-us">
                                <!--<li><i class="fa fa-envelope"></i><a href="mailto:?Subject={{ property.LongHeading }}&Body=Hi%2C%0A%0ACheck%20out%20this%20event%20from%20Shijieproperty%3A%20%3Ca%20href%3D%22{{ current_path_url }}%22%3EHere%3C/a%3E%0A%0AThank%20you.">{{ property.email }}</a></li>-->

                                <!--<li><i class="fa fa-envelope"></i><a href="mailto:?Subject={{ property.LongHeading }}&Body=%3Ca%20href%3D%22https%3A//www.google.com%22%3EHere%3C/a%3E">Debug Mode</a></li>-->
                                <li><i class="fa fa-envelope"></i><a href="mailto:{{ property.email }}?Subject={{ property.LongHeading }}">{{ property.email }}</a></li>
                                <li><i class="fa fa-phone"></i><a href="tel:+6{{ property.mobile }}">{{ property.mobile }}</a></li>
                            </ul>
                        </div>
                    </div>

                    <form ng-submit="sendMessage(property.email)" class="form-style col-md-8">
                        <div class="col-sm-12">
                            <input ng-model="contact_name" type="text" name="Name" placeholder="Name" class="form-control required fromName" />
                        </div>

                        <div class="col-sm-12">
                            <input ng-model="contact_email" type="email" name="Email" placeholder="Email" class="form-control required fromEmail" />
                        </div>

                        <div class="col-sm-12">
                            <input ng-model="contact_subject" type="text" name="Subject" placeholder="Subject" class="form-control required subject" />
                            <textarea ng-model="contact_message" name="Message" placeholder="Message" class="form-control required"></textarea>
                        </div>

                        <div class="center">
                            <button type="submit" class="btn btn-default-color submit_form"><i class="fa fa-envelope"></i> Send Message</button>
                        </div>
                    </form>
                </div>
                
      

              

            </div>
            <!-- END MAIN CONTENT -->
            <!-- BEGIN SIDEBAR -->
            <div class="sidebar gray col-sm-4">

                <!-- BEGIN NEWSLETTER -->
                <form ng-submit="submitForm($event)">
                    <div id="newsletter" class="col-sm-12">
                        <h2 class="section-title">Subscribe our<br><span>Newsletter</span></h2>
                        <div class="input-group">
                            <input ng-model="subscription_email" type="text" placeholder="Enter your E-mail" name="subscription_email" id="email" class="form-control" />
                            <span class="input-group-btn">
                                <button class="btn btn-default-color" type="submit">Subscribe</button>
                            </span>
                        </div>
                    </div>
                </form>


                <iframe width="100%" height="500px" scrolling="no" style="border: none;" src="https://www.opinionstage.com/polls/2409394/poll" frameBorder="0" name="os_frame" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

                <!-- END NEWSLETTER -->

            </div>
            <!-- END SIDEBAR -->

        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->